<template>
  <div class="network-info-panel">
    <!-- 网络信息 -->
    <div class="section-title">网络信息:</div>
    <el-row :gutter="24" class="info-row">
      <el-col :span="12">
        <div class="info-item"><span class="label">内网IP：</span><span>{{ networkInfo.inIp }}</span></div>
        <div class="info-item"><span class="label">联网方式：</span><span>-</span></div>
        <div class="info-item"><span class="label">网络配置结果：</span><span>-</span></div>
        <!-- <div class="info-item"><span class="label">IPv6状态：</span><span>未连通</span></div> -->
        <div class="info-item"><span class="label">NAT类型：</span><span>{{ networkInfo.natName }}</span></div>
      </el-col>
      <el-col :span="12">
        <div class="info-item"><span class="label">外网IP：</span><span>{{ networkInfo.outIp }}</span></div>
        <div class="info-item">
          <span class="label">IP归属：</span>
          <el-tooltip content="IP归属说明" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <span>{{ networkInfo.provinceName }}</span>
        </div>
        <div class="info-item">
          <span class="label">承诺总带宽/Mbps：</span>
          <span>{{ networkInfo.promiseBandWidth }}</span>
          <el-link type="primary" style="margin-left:8px;" @click="openPerss = true">修改</el-link>
          <el-link type="primary" style="margin-left:8px;" @click="openPoint = true">压测</el-link>
        </div>
        <!-- <div class="info-item"><span class="label">IPv6地址：</span><span>{{ networkInfo.value.ipv6Addr }}</span></div> -->
        <div class="info-item"><span class="label">UPnP配置：</span><span>{{ networkInfo.upnp }}</span></div>
      </el-col>
    </el-row>

    <el-drawer v-model="openPerss" title="承诺带宽" direction="rtl" size="40%" :append-to-body="true"
      :destroy-on-close="true">

      <div class="promise-bandwidth-drawer">
        <!-- 顶部提示 -->
        <el-alert class="top-alert" type="warning" show-icon :closable="false">
          <template #title>
            <div class="alert-title">须知：</div>
            <ol class="alert-list">
              <li>要求如实填写，否则可能会触发SLA；</li>
              <li>更改完承诺带宽要进行线路压测，否则可能不生效</li>
            </ol>
          </template>
        </el-alert>

        <!-- 表单 -->
        <el-form :model="form" label-position="top" label-width="150px" class="promise-form">
          <el-form-item label="SN">
            <el-input v-model="form.sn" disabled />
          </el-form-item>

          <el-form-item label="承诺单线上行/Mbps" required>
            <el-tooltip effect="dark" content="必填，单条线路的上行带宽" placement="top">
              <el-icon class="tip-icon">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>

            <el-input v-model.number="form.linePromiseBandWidth" type="number" min="0" @input="calcTotal" />

          </el-form-item>

          <el-form-item label="承诺线路数" required>

            <el-input v-model.number="form.promiseLineNum" type="number" min="0" @input="calcTotal" />
          </el-form-item>

          <el-form-item label="承诺总带宽/Mbps">
            <el-input :value="`${form.linePromiseBandWidth}*${form.promiseLineNum}=${totalBandwidth}`" disabled />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSave">保存承诺带宽</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer v-model="openPoint" title="节点压测" direction="rtl" :append-to-body="true" :destroy-on-close="true">
      <div class="node-stress-test-drawer">
        <!-- 顶部提示 -->
        <el-alert class="top-alert" type="warning" show-icon :closable="false">
          <template #title>
            <div class="alert-title">压测须知：</div>
            <ol class="alert-list">
              <li>每台设备每日限压测10次，超过10次不可再压；</li>
              <li>两次压测时间间隔需在5分钟以上</li>
            </ol>
          </template>
        </el-alert>

        <!-- 表单 -->
        <el-form :model="form" class="stress-form">
          <el-form-item label="SN:">
            <el-input v-model="form.sn" disabled />
          </el-form-item>

          <el-form-item label="是否接受跨省压测:">
            <el-select v-model="form.crossProvince" placeholder="接受" disabled>
              <el-option label="接受" value="1" />
              <el-option label="不接受" value="0" />
            </el-select>
          </el-form-item>

          <div class="tip-row">
            <el-icon class="tip-icon">
              <InfoFilled />
            </el-icon>
            <span><el-icon><Warning /></el-icon>设备未打上目标标签，不可选择跨省自压测</span>
          </div>

          <el-form-item>
            <el-button type="primary" @click="onStressTest">发起压测</el-button>
          </el-form-item>
        </el-form>
        <div class="divider"></div>
      </div>
    </el-drawer>

    <div class="divider"></div>

    <!-- 压测信息 -->
    <div class="section-title">压测信息:</div>
    <el-row :gutter="24" class="info-row">
      <el-col :span="12">
        <div class="info-item"><span class="label">压测时间：</span><span>{{ networkInfo.timeCreate }}</span></div>
        <div class="info-item"><span class="label">实际压测线路数：</span><span>{{ networkInfo.perssSize }}</span></div>
      </el-col>
      <el-col :span="12">
        <div class="info-item">
          <span class="label">压测状态：</span>
          {{ networkInfo.status === 1 ? '已下发' : networkInfo.status === 2 ? '已完成' : '压测成功' }}
          <!-- <span style="color:#52c41a;font-weight:bold;">压测成功</span> -->
        </div>
        <div class="info-item">
          <span class="label">压测总带宽：</span>
          <span>{{ networkInfo.machineBw }} Mbps| {{ networkInfo.machineBwV6 }} Mbps</span>
        </div>
      </el-col>
    </el-row>
    <div class="divider"></div>

    <!-- 路由压测情况 -->
    <div class="section-title">线路压测情况:</div>
    <el-table :data="routeTable" border style="width:100%;margin-bottom:24px;">
      <!-- <el-table-column prop="index" label="线路序号" width="80"/> -->
      <!-- <el-table-column prop="iface" label="网卡" width="100"/> -->
      <el-table-column prop="outIp" label="IP" />
      <!-- <el-table-column prop="account" label="拨号账号"/> -->
      <el-table-column prop="machineBw" label="IPv4 测速带宽（Mbps）">
        <template #default="scope">
          峰：{{scope.row.machineBw }}
        </template>
      </el-table-column>
      <el-table-column prop="machineBwV6" label="IPv6 测速带宽（Mbps）">
        <template #default="scope">
          峰：{{scope.row.machineBwV6 }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 网卡信息 -->
    <!-- <div class="section-title">网卡信息:</div>
        <el-table :data="nicTable" border style="width:100%;">
          <el-table-column prop="iface" label="网卡" width="100"/>
          <el-table-column prop="mac" label="mac 地址" width="160"/>
          <el-table-column prop="speed" label="网卡速率" width="120"/>
          <el-table-column prop="ip" label="IP地址" />
          <el-table-column prop="status" label="状态" width="100"/>
          <el-table-column prop="conn" label="连接状态" width="120"/>
          <template #empty>
            <div class="empty-block">
              <el-icon style="font-size:32px;"><i class="el-icon-document-remove"></i></el-icon>
              <div>暂无数据</div>
            </div>
          </template>
        </el-table> -->

  </div>
</template>
  
  <script setup name="NetworkInfoPanel">
  import { ref, watch } from 'vue'
  import { stressTestList, updateBandwidth, startStressTest } from '@/api/producer/device'
  import { ElMessage } from 'element-plus'
  import { QuestionFilled } from '@element-plus/icons-vue'

  const props = defineProps({
      formDrawer: {
          type: Object,
          required: true
      },
      activeName: { type: String, required: true },
      getFetchDeviceDetail: { type: Function, required: true }
  })

  const form = ref({})
  const form2 = ref({})
  
  const networkInfo = ref({})
  const routeTable = ref([])
  
  const nicTable = ref([]) // 暂无数据
  const openPerss = ref(false)
  const openPoint = ref(false)

  watch([
    () => props.formDrawer.sn,
    () => props.formDrawer
  ], ([sn, formDrawer]) => {
    if (formDrawer) {
      networkInfo.value = { ...formDrawer }
      console.log(networkInfo.value, 'networkInfo')
    }
  }, { immediate: true, deep: true })

watch(
    [() => props.activeName, () => props.formDrawer.sn ],
    ([tab, sn, tabActiveVal], [oldTab, oldSn, oldTabActive]) => {
        if (tab === 'fourth' && sn) {
            fetchData(sn)
        }
    },
    { immediate: true }
)

   /**设备信息
    * **/
  function fetchData(sn) {
    let params = {sn }
    stressTestList(params).then(res => {
      console.log(res, 'stressTestList')
        if (res.code === 200 && res.data) {
          Object.assign(networkInfo.value, res.data)
          routeTable.value = [{ ...networkInfo.value, ...res.data }]
          form.value.id = props.formDrawer.id;
          form.value.linePromiseBandWidth = networkInfo.value.linePromiseBandWidth;
          form.value.promiseLineNum = networkInfo.value.promiseLineNum;
          form.value.sn = networkInfo.value.sn;
        }
    })
  }

  const totalBandwidth = computed(() => {
    const up = Number(form.value.linePromiseBandWidth) || 0
    const cnt = Number(form.value.promiseLineNum) || 0
    return up * cnt
  })

  function calcTotal() {
    // 这里可做校验或联动
  }

  // 修改
  function onSave() {
    // 校验
    if (
      form.value.linePromiseBandWidth === null ||
      form.value.linePromiseBandWidth === undefined ||
      form.value.linePromiseBandWidth === '' ||
      form.value.promiseLineNum === null ||
      form.value.promiseLineNum === undefined ||
      form.value.promiseLineNum === ''
    ) {
      ElMessage.warning('请填写必填项')
      return
    }
    updateBandwidth(form.value).then(res => {
      if (res.code === 200) {
            // 提交逻辑
            ElMessage.success('保存成功')
            // props.getFetchDeviceDetail()
      }
    })

  }

  // 发起压测
  function onStressTest() {
    startStressTest({ sn: networkInfo.value.sn }).then(res => {
      if (res.code === 200){
        ElMessage.success('已发起压测')
      }
    })
    
  }
  </script>
  
  <style scoped lang="scss">
  .network-info-panel {
    font-size: 14px;
    color: #222;
    background: #fff;
  }
  .section-title {
    font-weight: bold;
    margin: 16px 0 8px 0;
    font-size: 15px;
  }
  .info-row {
    margin-bottom: 0;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    min-height: 28px;
  }
  .label {
    color: #888;
    min-width: 110px;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
  }
  .divider {
    border-bottom: 1px solid #eee;
    margin: 16px 0 16px 0;
  }
  .empty-block {
    padding: 32px 0;
    color: #aaa;
    text-align: center;
  }
  .promise-bandwidth-drawer {
  padding: 0 8px 0 8px;
  background: #fff;
  min-width: 400px;
}
.top-alert {
  margin-bottom: 24px;
  border-radius: 4px;
  border: 1px solid #ffe58f;
  background: #fffbe6;
  color: #ad8b00;
  font-size: 15px;
}
.alert-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.alert-list {
  margin: 0 0 0 20px;
  padding: 0;
  font-size: 14px;
}

.tip-icon {
  margin-left: 4px;
  color: #909399;
  font-size: 16px;
  vertical-align: middle;
  cursor: pointer;
  position: absolute;
  top: -27px;
  left: 140px;
}
.promise-form {
  margin-top: 16px;
  max-width: 600px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-input[disabled] {
  background: #f5f7fa;
  color: #bbb;
}
.el-button {
  min-width: 120px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #dadada;
}
.node-stress-test-drawer {
  padding: 16px 8px 0 8px;
  background: #fff;
  min-width: 400px;
}
.top-alert {
  margin-bottom: 24px;
  border-radius: 4px;
  border: 1px solid #ffe58f;
  background: #fffbe6;
  color: #ad8b00;
  font-size: 15px;
}
.alert-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.alert-list {
  margin: 0 0 0 20px;
  padding: 0;
  font-size: 14px;
}
.stress-form {
  margin-top: 16px;
  max-width: 600px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-input[disabled] {
  background: #f5f7fa;
  color: #bbb;
}
.tip-row {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
  margin-bottom: 18px;
  margin-left: 2px;
  & > span i{
    vertical-align: middle;
    margin-right: 10px;
  }
}
.tip-icon {
  margin-right: 4px;
  font-size: 16px;
}
.el-button {
  min-width: 120px;
}
.divider {
  border-top: 1px solid #eee;
  margin-top: 16px;
}
  </style>